<template>
	<div id="Star" class="star">
		<div class="score" v-model="score">
			<div class="item" :class="{active:item.active}" v-for="(item,index) in score" :key="index" @click="chose(item)">{{item.text}}</div>
		</div>
		<div class="level" v-model="selectval">
			<i :class="'score-icon '+selectval.icon"></i>
			<span>{{selectval.text}}</span>
		</div>
	</div>
</template>

<script>
	import Vue from 'vue'
	import $ from 'jquery';
	import {
		
	} from 'vux';

	export default {
		props:{
			score:{
				type:Array,
				default:function(){
					return [
						{
							value:'1',
							text:'失望',
							icon:'level-score-1',
							active:true
						},
						{
							value:'2',
							text:'一般',
							icon:'level-score-2',
							active:false
						},
						{
							value:'3',
							text:'满意',
							icon:'level-score-3',
							active:false
						},{
							value:'4',
							text:'喜欢',
							icon:'level-score-4',
							active:false
						},{
							value:'5',
							text:'超爱',
							icon:'level-score-5',
							active:false
						}
					];
				}
			},
			level:{
				type:Object,
				default:function(){
					return {
						value:'1',
						text:'失望',
						icon:'level-score-1'
					};
				}
			}
		},
		data() {
			return {
				selectval:{
					value:'5',
					text:'超爱',
					icon:'level-score-5'
				}
			}
		},
		components: {
			
		},
		watch: {},
		mounted() {
			//this.selectScore();
		},
		activated() {

		},
		deactivated() {
			
		},
		created() {

		},
		//方法
		methods: {
			//选择
			chose:function(item){
				//更改喜欢状态
				this.selectval = item;
				this.$emit("change", this.selectval);
				this.selectScore(item);
			},
			//遍历所有星星
			selectScore:function(curval){
				this.score.forEach(function(item){
					if(curval.value >= item.value){
						item.active = true;
					}else{
						item.active = false;
					}
				})
			},
		}
	}
</script>

<style scoped>
	.score-icon {
		width: 0.4rem;
		height: 0.4rem;
		background-size: 100% 100%;
		background-position: 0 0;
		display: inline-block;
	}
	.level-score-1{
		background-image: url(../assets/images/icon/ic_evaluate_despair.png);
	}
	.level-score-2{
		background-image: url(../assets/images/icon/ic_evaluate_normal.png);
	}
	.level-score-3{
		background-image: url(../assets/images/icon/ic_evaluate_satisfaction.png);
	}
	.level-score-4{
		background-image: url(../assets/images/icon/ic_evaluate_like.png);
	}
	.level-score-5{
		background-image: url(../assets/images/icon/ic_evaluate_super_love.png);
	}

	.star{
		display: flex;
	}
	.star .score{
		display: flex;
		flex: 1;
	}
	.star .score .item{
		margin-right: 0.45333rem;
		width: 0.50666rem;
		height: 0.50666rem;
		background: url(../assets/images/icon/ic_evaluate_star_unselecte.png) center center no-repeat;
		background-size: 100%;
		font-size: 0;
	}
	.star .score .item.active{
		background-image: url(../assets/images/icon/ic_evaluate_star_selected.png)
	}
	.star .score .item:last-child{
		margin-right: 0;
	}
	.star .level{
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.star .level span{
		margin-left: 0.13333rem;
		color: #DD2835;
		font-size: 0.32rem;
	}
</style>